<template>
    <div class="detail-wrapper">
        <el-card class="mt-4 !border-none" shadow="never">
            <template #header>
                <div class="card-header">
                    <span>基本信息</span>
                </div>
            </template>
            <div class="itemContent">
                <el-space>
                    <div class="w-120 label-title">商品分类</div>
                    <div>
                        <span>{{ pDetail.cateName || '_' }}</span>
                    </div>
                </el-space>
                <el-space>
                    <div class="w-120 label-title">商品品牌</div>
                    <div>
                        <span>{{ pDetail.brandName || '_' }}</span>
                    </div>
                </el-space>
                <el-space>
                    <div class="w-120 label-title">商品名称</div>
                    <div>
                        <span>{{ pDetail.goodsName || '_' }}</span>
                    </div>
                </el-space>
                <el-space>
                    <div class="w-120 label-title">商品类型</div>
                    <div>
                        <span>积分商品</span>
                    </div>
                </el-space>
                <el-space>
                    <div class="w-120 label-title">商品主图</div>
                    <div>
                        <el-space wrap v-if="detailImags">
                            <div v-for="(fit, index) in detailImags" :key="index" class="block">
                                <el-image
                                    style="width: 100px; height: 100px"
                                    :src="fit"
                                    :fit="fit"
                                />
                            </div>
                        </el-space>
                    </div>
                </el-space>
            </div>
        </el-card>
        <el-card :style="{ marginTop: '10px' }" class="mt-4 !border-none" shadow="never">
            <template #header>
                <div class="card-header">
                    <span>规格信息</span>
                </div>
            </template>
            <el-table size="large" :data="pDetail.goodsSpecs">
                <el-table-column label="规格值" prop="specName" min-width="80" />
                <el-table-column label="库存" prop="stock" min-width="100"></el-table-column>
                <el-table-column
                    label="供货商结算价"
                    prop="supplierPrice"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    label="平台结算价"
                    prop="supplyChainPrice"
                    min-width="100"
                ></el-table-column>
                <el-table-column label="利润" min-width="100" prop="profits"></el-table-column>
                <el-table-column
                    label="划线价"
                    prop="marketPrice"
                    min-width="100"
                ></el-table-column>
                <el-table-column label="打包数" prop="packageNum" min-width="80"></el-table-column>
                <el-table-column label="快递起订量" prop="moq" min-width="80"></el-table-column>
                <el-table-column label="物流起订量" prop="wlMoq" min-width="80"></el-table-column>
                <el-table-column label="重量(g)" prop="weight" min-width="80"> </el-table-column>
                <el-table-column label="规格图片" min-width="100">
                    <template #default="{ row }">
                        <el-image
                            style="width: 40px; height: 40px"
                            :src="row.image"
                            :fit="row.image"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <e-space>
                            <el-button
                                type="primary"
                                link
                                @click="
                                    handleEdit({
                                        ...row,
                                        type: 1,
                                        lowLimit: row.supplierPrice,
                                        price: row.supplyChainPrice,
                                        title: '修改平台结算价'
                                    })
                                "
                            >
                                修改平台结算价
                            </el-button>
                            <el-button
                                type="primary"
                                link
                                @click="
                                    handleEdit({
                                        ...row,
                                        type: 2,
                                        price: row.marketPrice,
                                        title: '修改划线价'
                                    })
                                "
                            >
                                修改划线价
                            </el-button>
                        </e-space>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card :style="{ marginTop: '10px' }" class="mt-4 !border-none" shadow="never">
            <template #header>
                <div class="card-header">
                    <span>商品描述</span>
                </div>
            </template>
            <div class="itemContent">
                <div v-html="pDetail.description || '_'"></div>
            </div>
        </el-card>
        <!-- <el-card :style="{ marginTop: '10px' }" class="mt-4 !border-none" shadow="never">
            <template #header>
                <div class="card-header">
                    <span>运费信息</span>
                </div>
            </template>
            <div class="itemContent">
                <el-space>
                    <div class="w-120 label-title">运费模版</div>
                    <div>
                        <span>xxxxxxxxx</span>
                    </div>
                </el-space>
                <el-space>
                    <div class="w-120 label-title">详情描述</div>
                    <div>
                        <el-space wrap>
                            <div v-for="(fit, index) in imgs" :key="index" class="block">
                                <el-image
                                    style="width: 100px; height: 100px"
                                    :src="fit"
                                    :fit="fit"
                                />
                            </div>
                        </el-space>
                    </div>
                </el-space>
            </div>
        </el-card> -->
        <edit-popup v-if="showEdit" ref="editRef" @success="getDetail" @close="showEdit = false" />
    </div>
</template>
<script lang="ts" setup name="productDetail">
import { detail } from '@/servers/goods/api/supplyChainshangpinguanli'
import { ref } from 'vue'
import editPopup from '../../priceEditor/index.vue'
const editRef = ref()
const route = useRoute()
const showEdit = ref(false)

const pDetail = ref({} as API.SupplyChainGoodsInfoVo)

const detailImags = computed(() => {
    if (pDetail.value.images) {
        if (typeof pDetail.value.images == 'string') return pDetail.value.images.split(',')
        return pDetail.value.images
    }
    return []
})

async function getDetail() {
    const res = await detail({
        id: route.query.id as any
    })
    pDetail.value = res
}

const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open(data.type, {
        id: data.id,
        price: data.price,
        title: data.title,
        lowLimit: data.lowLimit || 0
    })
}

getDetail()
</script>

<style lang="scss" scoped>
.itemContent {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    ::v-deep .el-space {
        margin-bottom: 10px;
    }
}
</style>
